Using View and Text Components in React Native

Course: React Native Training

Topic: Using View and Text Components

Course Link: React Native Training Course

Demo Link: Register for a Course Demo

JustAcademy Website: Visit JustAcademy

1. Introduction to View and Text Components

React Native provides built-in components for creating mobile application interfaces. Two of the most important components are View and Text. The View component organizes and groups interface elements, while the Text component displays textual content such as headings, labels, descriptions, and messages.

Unlike traditional web development, React Native does not use HTML elements such as <div> and <p> to construct its interface. Instead, it uses native-backed components that work across supported mobile platforms.

• View: Used to create containers, sections, rows, columns, and layouts.
• Text: Used to display and format text within the application.

These components form the foundation of many other React Native components, including cards, profile sections, product details, navigation headers, and forms.

Official resources: View documentation and Text documentation.

2. Understanding the View Component

The View component is a fundamental container in React Native. It can contain other components and helps organize the application's layout. It supports styling, Flexbox layout, touch-related behavior, and accessibility properties.

2.1 Basic Syntax of View

import React from 'react';
import { View, Text } from 'react-native';

export default function App() {
  return (
    <View>
      <Text>Welcome to React Native</Text>
    </View>
  );
}

In this example, the View acts as a container for the Text component. The text is displayed inside the container.

2.2 Important Features of View

• Groups multiple components together.
• Supports layout using Flexbox.
• Supports padding, margins, backgrounds, borders, and dimensions.
• Can contain nested View components.
• Can organize content horizontally or vertically.
• Can support touch handling and accessibility behavior when required.

2.3 Creating a Container

import React from 'react';
import { View, Text } from 'react-native';

export default function App() {
  return (
    <View style={{ padding: 20, backgroundColor: '#E5E7EB' }}>
      <Text>This text is inside a container.</Text>
    </View>
  );
}

The padding property creates space inside the container, while backgroundColor changes the container's background color.

3. Understanding the Text Component

The Text component displays readable content in a React Native application. It supports text styling, nested text, limited style inheritance within text, and certain touch-related interactions.

3.1 Basic Syntax of Text

import React from 'react';
import { View, Text } from 'react-native';

export default function App() {
  return (
    <View>
      <Text>Hello World!</Text>
    </View>
  );
}

The text between the opening and closing Text tags appears in the application's interface.

3.2 Examples of Text Content

<Text>Welcome to My App</Text>
<Text>Learn React Native step by step.</Text>
<Text>Price: ₹999</Text>
<Text>Your profile has been saved successfully.</Text>

The Text component is suitable for titles, subtitles, instructions, labels, descriptions, status messages, and dynamic values.

3.3 Why Text Must Be Inside Text

In React Native, ordinary text strings should be rendered inside a Text component. Placing a plain text node directly inside a View causes an error.

Incorrect example:

<View>
  Welcome to React Native
</View>

Correct example:

<View>
  <Text>Welcome to React Native</Text>
</View>

This is an important difference between React Native and HTML-based web development.

4. Difference Between View and Text

5. Styling the View Component

Styles control the appearance and layout of a View. React Native supports JavaScript style objects and the StyleSheet.create() API.

5.1 Using Inline Styles

import React from 'react';
import { View, Text } from 'react-native';

export default function App() {
  return (
    <View
      style={{
        backgroundColor: '#DBEAFE',
        padding: 20,
        margin: 10,
        borderRadius: 12
      }}
    >
      <Text>Styled Container</Text>
    </View>
  );
}

Inline styles are useful for simple examples and small dynamic style values. For larger components, named styles are often easier to maintain.

5.2 Using StyleSheet.create()

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Reusable Styling Example</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#F3F4F6',
    padding: 20,
    margin: 10,
    borderRadius: 12
  }
});

Using StyleSheet.create() keeps styles separate from JSX and makes the component easier to read.

5.3 Common View Style Properties

6. Styling the Text Component

Text styling helps create readable and visually organized interfaces. React Native uses JavaScript style properties rather than standard CSS declarations.

6.1 Example of Text Styling

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>React Native Training</Text>
      <Text style={styles.description}>
        Learn mobile application development.
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 20
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#1D4ED8',
    marginBottom: 10
  },
  description: {
    fontSize: 16,
    color: '#4B5563',
    lineHeight: 24
  }
});

6.2 Common Text Style Properties

7. Nesting View Components

Nesting means placing one component inside another. Nested views are useful for creating complex layouts from smaller sections.

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.headerText}>My Application</Text>
      </View>

      <View style={styles.content}>
        <Text>Welcome to the home screen.</Text>
      </View>

      <View style={styles.footer}>
        <Text>Copyright 2026</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#FFFFFF'
  },
  header: {
    padding: 20,
    backgroundColor: '#2563EB'
  },
  headerText: {
    color: '#FFFFFF',
    fontSize: 20,
    fontWeight: 'bold'
  },
  content: {
    flex: 1,
    padding: 20
  },
  footer: {
    padding: 12,
    backgroundColor: '#E5E7EB',
    alignItems: 'center'
  }
});

The outer View contains three inner views: a header, a content area, and a footer. This is a common pattern for structuring screens.

8. Using Flexbox with View

React Native uses Flexbox to arrange components. The View component is commonly used as a Flexbox container to control how its children are positioned and sized.

8.1 Understanding flex

The flex property controls how a component grows to use available space. For example, flex: 1 commonly allows a view to fill the available space left by its parent layout.

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.box}>
        <Text>First Section</Text>
      </View>
      <View style={styles.box}>
        <Text>Second Section</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16
  },
  box: {
    flex: 1,
    marginVertical: 8,
    padding: 16,
    backgroundColor: '#DBEAFE'
  }
});

Both sections share the available vertical space because each uses flex: 1.

8.2 Understanding flexDirection

The flexDirection property determines the main axis of a Flexbox container.

• column: Arranges children vertically. This is the default direction in React Native.
• row: Arranges children horizontally.
• column-reverse: Arranges children in reverse vertical order.
• row-reverse: Arranges children in reverse horizontal order.

<View style={{ flexDirection: 'row' }}>
  <Text>First</Text>
  <Text>Second</Text>
  <Text>Third</Text>
</View>

8.3 Understanding Alignment

• justifyContent aligns children along the main axis.
• alignItems aligns children along the cross axis.
• alignSelf allows an individual child to override the container's cross-axis alignment.
• flexWrap controls whether children can wrap onto additional lines.

<View
  style={{
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 16
  }}
>
  <Text>Profile</Text>
  <Text>Edit</Text>
</View>

Flexbox is especially useful for creating headers, horizontal rows, cards, button groups, and responsive screen layouts.

9. Combining View and Text Components

Most interfaces combine View and Text components. A view creates the structure, while text elements communicate the information.

9.1 Example: Information Card

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

export default function App() {
  return (
    <View style={styles.card}>
      <Text style={styles.title}>React Native</Text>
      <Text style={styles.description}>
        Build mobile applications with reusable components.
      </Text>
      <Text style={styles.status}>Beginner Friendly</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  card: {
    padding: 20,
    margin: 16,
    borderRadius: 12,
    backgroundColor: '#F3F4F6',
    borderWidth: 1,
    borderColor: '#D1D5DB'
  },
  title: {
    fontSize: 22,
    fontWeight: 'bold',
    color: '#1D4ED8',
    marginBottom: 8
  },
  description: {
    fontSize: 15,
    lineHeight: 22,
    color: '#374151'
  },
  status: {
    marginTop: 12,
    fontSize: 13,
    fontWeight: 'bold',
    color: '#047857'
  }
});

This example demonstrates how one container groups multiple text elements and applies a consistent card layout.

10. Nesting Text Components

React Native allows a Text component to contain nested Text components. This is useful when different parts of a sentence need different formatting.

10.1 Bold and Colored Text

import React from 'react';
import { Text, View } from 'react-native';

export default function App() {
  return (
    <View>
      <Text>
        Welcome to{' '}
        <Text style={{ fontWeight: 'bold' }}>React Native</Text>
        {' '}development.
      </Text>
    </View>
  );
}

Only the nested text has bold styling, while the rest of the sentence retains its surrounding style.

10.2 Displaying Important Information

<Text>
  Order Status:{' '}
  <Text style={{ color: '#047857', fontWeight: 'bold' }}>
    Confirmed
  </Text>
</Text>

Nested text is appropriate for inline formatting. Use separate Text components inside a View when content should appear as separate blocks.

11. Displaying Dynamic Text with JavaScript Expressions

React Native allows JavaScript expressions to be placed inside JSX curly braces. This enables text components to display variables, calculated values, and data received through props.

11.1 Displaying Variables

import React from 'react';
import { View, Text } from 'react-native';

export default function App() {
  const userName = 'Aarav';
  const age = 25;

  return (
    <View>
      <Text>Name: {userName}</Text>
      <Text>Age: {age}</Text>
    </View>
  );
}

11.2 Displaying Calculated Values

const price = 1000;
const discount = 100;
const finalPrice = price - discount;

return (
  <View>
    <Text>Original Price: ₹{price}</Text>
    <Text>Discount: ₹{discount}</Text>
    <Text>Final Price: ₹{finalPrice}</Text>
  </View>
);

11.3 Conditional Text

const isLoggedIn = true;

return (
  <View>
    <Text>
      {isLoggedIn ? 'Welcome Back!' : 'Please Log In'}
    </Text>
  </View>
);

Conditional expressions are useful for showing different messages based on authentication, payment status, form validation, or other application conditions.

12. Using Props with View and Text

Props allow reusable components to receive content and configuration from their parent. This makes it possible to build generic cards, headings, and information sections.

12.1 Reusable Heading Component

import React from 'react';
import { Text, StyleSheet } from 'react-native';

function Heading({ title }) {
  return <Text style={styles.heading}>{title}</Text>;
}

const styles = StyleSheet.create({
  heading: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#111827',
    marginBottom: 12
  }
});

export default Heading;

Example usage:

<Heading title="Home Screen" />
<Heading title="Profile Screen" />
<Heading title="Settings Screen" />

12.2 Reusable Information Card

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

function InfoCard({ title, description }) {
  return (
    <View style={styles.card}>
      <Text style={styles.title}>{title}</Text>
      <Text style={styles.description}>{description}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  card: {
    padding: 16,
    marginVertical: 8,
    backgroundColor: '#F9FAFB',
    borderRadius: 10
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 6
  },
  description: {
    fontSize: 14,
    color: '#4B5563',
    lineHeight: 21
  }
});

export default InfoCard;

Use the component with different information:

<InfoCard
  title="React Native"
  description="Create applications for mobile devices."
/>

<InfoCard
  title="JavaScript"
  description="Learn the programming language used by React Native."
/>

13. Handling Long Text and Text Overflow

Mobile screens have limited space. Long descriptions, product names, and notification messages may need special handling to preserve the layout.

13.1 Using numberOfLines

<Text numberOfLines={2}>
  This is a long description that may need to be limited to two lines
  so that the card remains compact on smaller screens.
</Text>

The numberOfLines prop limits the number of displayed lines. React Native may truncate additional text when it exceeds that limit.

13.2 Using ellipsizeMode

<Text numberOfLines={1} ellipsizeMode="tail">
  This is a long product title that might not fit on one line.
</Text>

The ellipsizeMode prop controls how truncated text is indicated when used with numberOfLines. Test the result on target platforms because support and behavior can differ in some cases.

13.3 Readability Tips

• Use appropriate font sizes and line heights.
• Allow important descriptions to wrap naturally where possible.
• Do not truncate essential information without providing another way to access it.
• Test long text with different screen sizes and accessibility font scaling.
• Avoid fixed heights that unintentionally cut off text.

14. Accessibility Best Practices for View and Text

Accessibility helps users understand and navigate an application, including people who use screen readers or larger text settings.

• Use meaningful headings and labels.
• Maintain sufficient contrast between text and background colors.
• Allow text to scale when possible instead of forcing small fixed sizes.
• Use accessibility labels and roles for interactive elements when appropriate.
• Do not communicate important information through color alone.
• Check that text is not clipped or hidden on small screens.

For example, a heading can be identified for assistive technology using a suitable accessibility role where supported:

<Text accessibilityRole="header">
  Account Information
</Text>

For additional guidance, see the official React Native Accessibility documentation.

15. Common Mistakes and Troubleshooting

16. Best Practices for Using View and Text

• Use View to create layout structure and group related components.
• Use Text for all ordinary textual content.
• Keep component responsibilities clear and use meaningful names.
• Prefer reusable style definitions for repeated styling.
• Use Flexbox instead of relying on fixed positions for every element.
• Use nested Text components for inline text formatting.
• Use props to create reusable headings, labels, and information cards.
• Test the interface on different screen sizes and platforms.
• Maintain accessible contrast, readable text, and sensible spacing.
• Keep JSX easy to understand by extracting complex sections into smaller components.

17. Practical Project: Student Information Card

Project Objective

Create a student information card using View and Text. The project demonstrates containers, text styling, nested views, props, and layout organization.

17.1 Requirements

• Display the student's name.
• Display the course name and student ID.
• Show the student's enrollment status.
• Use a card-style layout with padding, borders, and rounded corners.
• Use different text styles for the title, details, and status.
• Make the card reusable by accepting information through props.

17.2 Complete Example

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

function StudentCard({ name, course, studentId, status }) {
  return (
    <View style={styles.card}>
      <View style={styles.header}>
        <Text style={styles.name}>{name}</Text>
        <Text style={styles.status}>{status}</Text>
      </View>

      <View style={styles.details}>
        <Text style={styles.label}>Course</Text>
        <Text style={styles.value}>{course}</Text>

        <Text style={styles.label}>Student ID</Text>
        <Text style={styles.value}>{studentId}</Text>
      </View>
    </View>
  );
}

export default function App() {
  return (
    <View style={styles.screen}>
      <Text style={styles.screenTitle}>Student Information</Text>

      <StudentCard
        name="Aarav Sharma"
        course="React Native Training"
        studentId="RN102"
        status="Active"
      />

      <StudentCard
        name="Priya Mehta"
        course="JavaScript Fundamentals"
        studentId="JS205"
        status="Enrolled"
      />
    </View>
  );
}

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    padding: 20,
    backgroundColor: '#F3F4F6'
  },
  screenTitle: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 16,
    color: '#111827'
  },
  card: {
    padding: 16,
    marginBottom: 14,
    borderRadius: 12,
    backgroundColor: '#FFFFFF',
    borderWidth: 1,
    borderColor: '#D1D5DB'
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    flexWrap: 'wrap',
    marginBottom: 12
  },
  name: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#1D4ED8'
  },
  status: {
    fontSize: 12,
    fontWeight: 'bold',
    color: '#047857'
  },
  details: {
    borderTopWidth: 1,
    borderTopColor: '#E5E7EB',
    paddingTop: 12
  },
  label: {
    fontSize: 12,
    color: '#6B7280',
    marginTop: 6
  },
  value: {
    fontSize: 15,
    color: '#111827',
    marginTop: 2
  }
});

17.3 Project Explanation

1. StudentCard: A reusable component that accepts student details through props.
2. Outer View: Creates the card container and applies background, border, padding, and rounded corners.
3. Header View: Arranges the student name and status horizontally.
4. Details View: Groups the course and student ID information.
5. Text components: Display headings, labels, values, and status.
6. StyleSheet: Keeps layout and text styles organized.

The same StudentCard component can display information for many students without duplicating the layout.

18. Practice Exercises

1. Create a screen with a main View containing a title and subtitle.
2. Create three nested views representing a header, content area, and footer.
3. Build a card with a heading, description, and status label using Text.
4. Use flexDirection: 'row' to place two text labels horizontally.
5. Display a product name, price, and discount using JavaScript expressions.
6. Create a reusable heading component that accepts its text through props.
7. Use nested Text components to make part of a sentence bold.
8. Limit a long description to three lines using numberOfLines.
9. Build a profile card with a name, email, and membership status.
10. Test your layout with a small screen and larger text settings.

19. Interview Questions and Answers

Q1. What is the View component in React Native?

View is a fundamental container used to group components and organize layouts. It supports styling, Flexbox, and accessibility-related features.

Q2. What is the Text component?

Text displays textual content in a React Native application and supports text formatting, nested text, and selected interactions.

Q3. Can plain text be placed directly inside View?

No. Ordinary text content should be placed inside a Text component.

Q4. What is the difference between View and Text?

View primarily structures and lays out UI elements, while Text displays and formats textual content.

Q5. What is StyleSheet.create()?

StyleSheet.create() is an API used to organize named style definitions in React Native.

Q6. What is Flexbox?

Flexbox is a layout system that arranges components along main and cross axes. React Native uses it extensively for responsive interface layouts.

Q7. What is flexDirection?

flexDirection determines the main axis of a Flexbox container. Common values include column and row.

Q8. Can Text components be nested?

Yes. Nested Text components can format part of a sentence differently, such as making selected words bold or changing their color.

Q9. How do you display dynamic text?

Use JavaScript expressions inside JSX curly braces, for example {'{userName}'} or {'{price}'}.

Q10. How can long text be limited?

Use properties such as numberOfLines and, when needed, ellipsizeMode to control the displayed text length.

Q11. Why should styles be separated from JSX?

Separating styles can improve readability, reduce duplication, and make visual changes easier to maintain.

Q12. How do View and Text work together?

View creates the layout structure, and Text displays the information inside that structure. They are commonly combined to build cards, profile screens, and other UI sections.

20. Quick Revision Checklist

• Understand the purpose of View and Text.
• Wrap ordinary text content inside Text.
• Use View to group components and create layouts.
• Know the difference between inline styles and StyleSheet.create().
• Understand common text styling properties.
• Use Flexbox for arranging components.
• Practice nesting views and text components correctly.
• Display dynamic values using JSX expressions.
• Use props to build reusable cards and headings.
• Handle long text and text scaling appropriately.
• Follow accessibility and readability best practices.
• Test interfaces on different devices and screen sizes.

21. Official Learning Resources

• React Native View Documentation
• React Native Text Documentation
• React Native Style Documentation
• React Native Flexbox Layout
• React Native Accessibility Guide
• React Native Core Components and APIs

22. Conclusion

The View and Text components are essential building blocks in React Native. View helps create containers, organize components, and manage layouts with Flexbox. Text displays textual content and provides options for formatting, nesting, and handling long messages.

By learning how to combine these components, use styles, display dynamic data, and organize layouts, developers can create clean and reusable mobile interfaces. Practice the examples and exercises to build a strong foundation for more advanced React Native components and application screens.

Explore React Native Training: View React Native Training Course

Register for a Demo: Book a Course Demo

Visit JustAcademy: https://www.justacademy.co/